<template>
	<view class="template-circle tn-safe-area-inset-bottom">
		<view class="ranking-page">
			<!-- 滚动感谢语 -->
			<view class="scroll-thanks">
				<view class="thanks-content" :style="{ animationDuration: scrollTime + 's' }">
					<text class="thanks-item" v-for="(msg, index) in shuffledThanks" :key="index">
						{{ msg }} &nbsp;&nbsp;&nbsp;&nbsp;
					</text>
				</view>
			</view>

			<!-- 排行榜列表 -->
			<view class="ranking-container">
				<!-- 前三名 -->
				<view class="top-ranks">
					<view class="rank-item rank-1" v-for="(item, index) in topThree" :key="index">
						<view class="rank-num">{{ index + 1 }}</view>
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="donor-name">{{ item.name }}</view>
						<view class="donor-times">累计捐赠 {{ item.times }} 次</view>
						<view class="donor-amount">¥{{ item.amount.toLocaleString() }}</view>
					</view>
				</view>

				<!-- 其他排名 -->
				<view class="normal-ranks">
					<view class="normal-rank-item" v-for="(item, index) in otherRanks" :key="index">
						<view class="rank-num">{{ index + 4 }}</view>
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="donor-info">
							<view class="donor-name">{{ item.name }}</view>
							<view class="donor-times">累计捐赠 {{ item.times }} 次</view>
						</view>
						<view class="donor-amount">¥{{ item.amount.toLocaleString() }}</view>
					</view>
				</view>
			</view>

			<!-- 捐赠按钮 -->
			<view class="donate-btn-wrap">
				<button class="donate-btn" @click="goToDonation">我要捐赠</button>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTime: 25,
				baseThanks: [
					"感谢王公益的爱心捐赠，您的善举温暖了无数人",
					"感谢李爱心的爱心捐赠，您的善意让世界更美好",
					"感谢张奉献的爱心捐赠，您的付出传递了希望",
					"感谢赵慈善的爱心捐赠，您的行动诠释了大爱",
					"感谢孙友爱的爱心捐赠，您的支持意义非凡",
					"感谢周互助的爱心捐赠，您的善良值得被铭记",
					"感谢吴奉献的爱心捐赠，您的慷慨带来了力量",
					"感谢郑公益的爱心捐赠，您的温暖照亮了前路"
				],
				shuffledThanks: [],
				topThree: [{
						name: "王公益",
						avatar: "/static/avatar/1.png",
						times: 25,
						amount: 15200
					},
					{
						name: "李爱心",
						avatar: "/static/avatar/2.png",
						times: 12,
						amount: 8600
					},
					{
						name: "张奉献",
						avatar: "/static/avatar/3.png",
						times: 8,
						amount: 6800
					}
				],
				otherRanks: [{
						name: "赵慈善",
						avatar: "/static/avatar/4.png",
						times: 6,
						amount: 5200
					},
					{
						name: "孙友爱",
						avatar: "/static/avatar/5.png",
						times: 5,
						amount: 4800
					},
					{
						name: "周互助",
						avatar: "/static/avatar/1.png",
						times: 4,
						amount: 4200
					},
					{
						name: "吴奉献",
						avatar: "/static/avatar/2.png",
						times: 3,
						amount: 3600
					},
					{
						name: "郑公益",
						avatar: "/static/avatar/3.png",
						times: 3,
						amount: 3200
					}
				]
			};
		},
		created() {
			this.shuffleThanks();
			setInterval(() => this.shuffleThanks(), this.scrollTime * 1000);
		},
		methods: {
			shuffleThanks() {
				const temp = [...this.baseThanks];
				for (let i = temp.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[temp[i], temp[j]] = [temp[j], temp[i]];
				}
				this.shuffledThanks = temp;
			},

			goToDonation() {
				uni.navigateTo({
					url: '/circlePages/donation' // 对应minePages分包下的donation页面
				});
			}
		}
	};
</script>

<style scoped>
	/* 关键修改：使用安全区域内边距，避免被导航栏遮挡 */
	.ranking-page {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		padding-top: 40rpx; /* 兜底值，适配不支持安全区域的情况 */
	}

	/* 滚动感谢语 */
	.scroll-thanks {
		background: linear-gradient(90deg, #008662, #007356);
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
		position: relative;
		padding: 0 30rpx;
	}

	.thanks-content {
		white-space: nowrap;
		animation: scroll-left linear infinite;
		display: flex;
		align-items: center;
		height: 100%;
	}

	@keyframes scroll-left {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.thanks-item {
		margin: 0 30rpx;
		font-size: 26rpx;
	}

	.top-ranks {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0 30rpx;
		padding: 0 30rpx;
	}

	.top-ranks .rank-item {
		width: 30%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.rank-1 .rank-num {
		background-color: #ffd700;
		color: #fff;
	}

	.rank-2 .rank-num {
		background-color: #c0c4cc;
		color: #fff;
	}

	.rank-3 .rank-num {
		background-color: #cd853f;
		color: #fff;
	}

	.top-ranks .rank-num {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 50%;
		font-size: 24rpx;
		font-weight: bold;
		margin: 0 auto 16rpx;
	}

	.top-ranks .avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 auto 16rpx;
		overflow: hidden;
		border: 2rpx solid #f0f0f0;
	}

	.top-ranks .avatar image {
		width: 100%;
		height: 100%;
	}

	.top-ranks .donor-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.top-ranks .donor-times {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 16rpx;
	}

	.top-ranks .donor-amount {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff5252;
	}

	.normal-ranks {
		padding: 0 30rpx;
	}

	.normal-rank-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.normal-rank-item .rank-num {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		border-radius: 50%;
		background-color: #f5f5f5;
		color: #888;
		margin-right: 20rpx;
	}

	.normal-rank-item .avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		overflow: hidden;
		border: 2rpx solid #f0f0f0;
	}

	.normal-rank-item .avatar image {
		width: 100%;
		height: 100%;
	}

	.donor-info {
		flex: 1;
	}

	.normal-rank-item .donor-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 6rpx;
		display: block;
	}

	.normal-rank-item .donor-times {
		font-size: 22rpx;
		color: #999;
		display: block;
	}

	.normal-rank-item .donor-amount {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff6b6b;
	}

	.donate-btn-wrap {
		padding: 40rpx 30rpx;
	}

	.donate-btn {
		background: linear-gradient(90deg, #008662, #007356);
		color: #fff;
		border-radius: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		box-shadow: 0 6rpx 16rpx rgba(160, 255, 138, 0.3);
	}
</style>